<template>
  <div class="login-page">
        <!--    背景-->
<!--            <background style="height: 100%"></background>-->
    <div id="particles"></div>
    <el-card class="login-card" shadow="always">
      <div slot="header" class="header">
        <span id="title" style="font-family: 楷体,serif;font-weight: bold">专家库管理系统</span>
      </div>
      <div>
        <div class="login-box">
          <!-- 登录界面 -->
          <div>
            <el-form :model="loginForm" status-icon ref="loginForm" :rules="rules" class="login-form">
              <!-- 用户名输入框 -->
              <el-form-item prop="account">
                <el-input type="text" v-model="loginForm.account" autocomplete="off" placeholder="用户名"
                          prefix-icon="el-icon-user" clearable></el-input>
              </el-form-item>
              <!-- 密码输入框 -->
              <el-form-item prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"
                          prefix-icon="el-icon-lock" clearable></el-input>
              </el-form-item>
              <!-- 验证码输入框 -->
              <el-form-item prop="checkCode">
                <div class="checkCode-box">
                  <el-input type="text" v-model="loginForm.checkCode" autocomplete="off"
                            placeholder="输入验证码" prefix-icon="el-icon-circle-check" clearable></el-input>
                  <img :src='captchaCodeSrc'  id="login-checkCode"
                       @click="getCaptchaCode"
                       alt="图片加载失败"/>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login('loginForm')" class="login-btn">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <el-tooltip class="item" effect="dark" content="联系方式:17390580964" placement="bottom">
        <el-button type="text" class="call-admin">无法登录?联系管理员</el-button>
      </el-tooltip>

    </el-card>
  </div>
</template>
<script src="src/assets/js/particles.min.js"></script>
<script>
import { validateAccount, validatePassword, validateCheckCode } from '@/utils/validate/login-validate.js'
import { axios } from 'axios'
import { GetCaptchaApi, UserLoginApi } from '@/request/user/login-api'
import { setAccessToken, setRefreshToken } from '@/utils/storage'
import { mapMutations, mapActions } from 'vuex'
import Vanta from '@/components/background/background.vue'
import md5 from 'js-md5'
import Vue from 'vue'
// 引入particles.json文件用于配置canvas
import particlesJson from '/src/assets/json/particles.json'

Vue.prototype.$md5 = md5
export default {
  components: {
    background: Vanta
  },
  mounted () {
    require('particles.js')
    particlesJS('particles', particlesJson)
  },
  data () {
    return {
      loginForm: {
        account: '',
        password: '',
        checkCode: ''
      },
      rules: {
        account: {
          validator: validateAccount,
          trigger: 'blur'
        },
        password: {
          validator: validatePassword,
          trigger: 'blur'
        },
        checkCode: {
          validator: validateCheckCode,
          trigger: 'blur'
        }
      },
      captchaCodeSrc: ''
    }
  },
  created () {
    this.getCaptchaCode()
    //清除vuex的menuData数据，解决后退bug
    this.changeMenuData([])
  }
  ,
  methods: {
    ...mapMutations({
      changeMenuData: 'userMenuData/changeMenuData'
    }),
    ...mapActions({
      asyncChangeUserInfo: 'userInfo/asyncChangeUserInfo'
    }),
    login (loginForm) {
      this.$refs[loginForm].validate(async (valid) => {
        if (valid) {
          // 校验通过走这里
          // 发起登录请求
         let md5Password=this.$md5(this.loginForm.password)
          let res = await UserLoginApi(
              {
                account: this.loginForm.account,
                password: md5Password,
                checkCode: this.loginForm.checkCode,
                uuid: localStorage.getItem('profile-img-uuid')
              }
          )
          //清除uuid
          localStorage.removeItem('profile-img-uuid')
          if (res.code === 200) {
            this.$notify({
              title: '欢迎登录',
              message: res.data.name + '，欢迎使用专家库管理系统',
              type: 'success'
            })
            //检查是否为手机登录
            let flag= navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
            if (flag){
              this.$notify({
                title: '提示',
                message: '检测您使用移动端设备登录，建议横屏使用',
                type: 'success'
              })
            }
            //保存token
            setAccessToken(res.data.accessToken)
            localStorage.setItem('profile-account', res.data.account)
            setRefreshToken(res.data.refreshToken)
            //发起查询用户信息的请求
            await this.asyncChangeUserInfo(res.data.account)
            //跳转首页
            await this.$router.push('/home')
          } else {
            this.$message.error(res.msg)
            await this.getCaptchaCode()
          }
        } else {
          // 校验没有通过
          this.$message.warning('请输入正确的内容')
        }
      })
    },
    async getCaptchaCode () {
      let res = await GetCaptchaApi()
      if (res.code === 200) {
        this.captchaCodeSrc = 'data:image/gif;base64,' + res.data.img
        localStorage.setItem('profile-img-uuid', res.data.uuid)
      } else {
        this.$message.error('验证码错误或已失效')
      }
    }
  }
}
</script>
<style scoped lang="less">
.login-page {
  text-align: center;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  user-select: none;
  background-color: rgb(26, 63, 115);

  .login-card {
    max-width: 500px;
    min-height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    z-index: 2;
    transition: 0.5s;
    /deep/ .el-card__header {
      border-bottom: none;
      margin-top: 20px;
      color: rgb(26, 63, 115);
      padding-bottom: 5px;
    }
    /deep/.el-card__body{
      padding-top: 5px;
    }
    span {
      font-size: 24px;
    }

    .login-box {
      margin-top: 10px;

      .login-form {
        margin: 0 auto;
        padding: 10px;
        width: 280px;

        .el-input {
          margin-top: 10px;
          border-top: none;

        }

        .checkCode-box {
          display: flex;

          #login-checkCode {
            margin-left: 20px;
            margin-top: 10px;
            border-radius: 3px;

            height:40px;
            width:85px;
          }
        }

        .login-btn {
          width: 100%;
          border: none;
          border-radius: 0;
        }
      }
    }
  }
}
::v-deep .el-card{
  border-radius: 10px!important;
  &:hover{
    border-radius: 30px!important;
  }
}

::v-deep .el-input__inner::placeholder {
  color: #8c939d!important;
}
</style>
